<template>
  <el-container>
    <el-header>
      <div class="header-left">
        <h3>
          <i class="el-icon-office-building"></i
          ><span style="color: #ef9126">智慧消防应急</span>管理系统平台
        </h3>
      </div>
      <div class="header-middle">
        <el-menu
          default-active="/comprehensive"
          background-color="#282c34"
          text-color="#fff"
          active-text-color="#ffd04b"
          class="el-menu-demo"
          mode="horizontal"
          :router="true"
        >
          <el-menu-item v-for="v in list" :key="v.href" :index="v.href">{{
            v.title
          }}</el-menu-item>
          <!-- <el-menu-item index="/comprehensive">综合态势</el-menu-item>
          <el-menu-item index="/equipment">设备管理</el-menu-item>
          <el-menu-item index="/alarm">告警管理</el-menu-item>
          <el-menu-item index="/inspection">巡检管理</el-menu-item>
          <el-menu-item index="/fault">故障管理</el-menu-item>
          <el-menu-item index="/duty">值班室管理</el-menu-item>
          <el-menu-item index="/risk">隐患管理</el-menu-item>
          <el-menu-item index="/system">系统设置</el-menu-item> -->
        </el-menu>
      </div>
      <div class="header-right">
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            <!-- <el-image :src="img"> -->
            <el-avatar :size="40" :src="img" @error="errorHandler">
              <img
                src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
              />
            </el-avatar>
            <!-- </el-image> -->
            {{ user }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="editPass">修改密码</el-dropdown-item>
            <el-dropdown-item command="backLogin">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>
    <el-main>
      <router-view></router-view>
    </el-main>
    <el-footer style="height: 34px"
      >Copyright © Hardy, All Rights Reserved,智慧消防应急管理系统</el-footer
    >
    <!-- 修改密码dialog -->
    <el-dialog title="修改密码" :visible.sync="dialogPassVisible" width="30%">
      <el-form :model="pass">
        <el-form-item label="新密码" label-width="">
          <el-input
            v-model="pass.newName"
            maxlength="6"
            placeholder="最多6位数字+字母+字符"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" label-width="">
          <el-input
            v-model="pass.reName"
            maxlength="6"
            placeholder="确认密码"
            show-password
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogPassVisible = false">取 消</el-button>
        <el-button type="primary" @click="changePass">确 定</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      img: "",
      list: [],
      user: "",
      dialogPassVisible: false,
      pass: {
        newName: "",
        reName: "",
      },
      editPass: null,
    };
  },
  methods: {
    //修改密码
    changePass() {
      console.log(this.editPass, 12345);
      if (this.pass.newName == this.pass.reName) {
        this.$axios({
          url: "/user",
          method: "put",
          data: {
            id: this.editPass.id,
            pwd: this.pass.reName,
            roleName: this.editPass.roleName,
            userName: this.editPass.userName,
            status: Number(this.editPass.status),
            headPic: this.editPass.headPic,
          },
        }).then((res) => {
          console.log(res.data);
          if (res.data.code == 200) {
            this.$message.success("密码修改成功");
            this.dialogPassVisible = false;
          } else {
            this.$message.error("密码修改失败");
          }
        });
      } else {
        this.$message.error("两次密码不一致");
      }
    },
    errorHandler() {
      return true;
    },
    handleCommand(command) {
      console.log(command);
      if (command == "editPass") {
        this.dialogPassVisible = true;
      } else {
        this.$router.push("/login");
      }
    },
  },
  mounted() {
    this.$axios({
      url: `/users/1/100`,
    }).then((res) => {
      console.log(res);
      if (res.status == 200) {
        this.editPass = res.data.data;
        var res = this.editPass.filter((v) => {
          if (v.userName == this.user) {
            return v;
          }
        });
        this.editPass = { ...res[0] };
        console.log(this.editPass, "editPass");
      }
    });
    let token = sessionStorage.getItem("token");
    console.log(1);
    if (!token) {
      this.$router.push("/login");
    }
    let user = JSON.parse(sessionStorage.getItem("user"));
    let list = JSON.parse(sessionStorage.getItem("list"));
    this.user = user.userName;
    this.list = list;
    this.img = user.headPic;
  },
};
</script>

<style lang="less" scoped>
/deep/.el-avatar {
  border: 2px solid #fff;
  margin-right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  vertical-align: middle;
}
/deep/.el-dialog {
  padding: 10px 40px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #ffffff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-container {
  height: 100%;
}
.el-header {
  display: flex;
  justify-content: space-between;
  background-color: #282c34;
  line-height: 60px;
  .header-left {
    width: 300px;
    h3 {
      color: #fff;
      i {
        font-size: 34px;
        vertical-align: middle;
      }
      span {
        margin-left: 10px;
      }
    }
  }
  .header-middle {
    .el-menu {
      border-bottom: none;
    }
  }
  .header-right {
    width: 150px;
    color: #fff;
    i {
      margin: 0 5px;
      font-size: 20px;
      &:last-child {
        position: relative;
        top: 2px;
      }
    }
  }
}
.el-footer {
  font-size: 10px;
  background: #f2f6fc;
  line-height: 34px;
  text-align: center;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  padding: 0;
}
</style>